<template>
  <view class="product-section">
    <!-- 标题区域 -->
    <view class="section-header">
      <text class="title">{{ title }}</text>
      <text class="subtitle">{{ subtitle }}</text>
    </view>
    
    <!-- 顶部大banner -->
    <view class="banner"></view>
    
    <!-- 商品列表 -->
    <view class="product-list">
      <view class="product-item" v-for="(item, index) in products" :key="index">
        <!-- 商品图片 -->
        <view class="image-wrapper">
          <image class="product-image" :src="item.image" mode="aspectFill" />
        </view>
        
        <!-- 商品信息 -->
        <view class="product-info">
          <text class="name">{{ item.name }}</text>
          <text class="desc">{{ item.description }}</text>
          <view class="bottom-row">
            <view class="price-wrapper">
              <text class="symbol">¥</text>
              <text class="price">{{ item.price }}</text>
            </view>
            <view class="points">送{{ item.points }}积分</view>
            <button class="buy-btn" @tap="handleBuy(item)">立即购买</button>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'ProductSection',
  props: {
    title: {
      type: String,
      required: true
    },
    subtitle: {
      type: String,
      required: true
    },
    products: {
      type: Array,
      default: () => []
    }
  },
  methods: {
    handleBuy(product) {
      uni.showToast({
        title: '购买功能开发中',
        icon: 'none'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.product-section {
  padding: 20rpx;
  
  .section-header {
    display: flex;
    align-items: baseline;
    margin-bottom: 20rpx;
    
    .title {
      font-size: 40rpx;
      font-weight: bold;
      margin-right: 16rpx;
    }
    
    .subtitle {
      font-size: 28rpx;
      color: #666;
    }
  }

  .banner {
    width: 100%;
    height: 200rpx;
    background: #ff6634;
    border-radius: 16rpx;
    margin-bottom: 20rpx;
  }

  .product-list {
    .product-item {
      background: #fff;
      border-radius: 16rpx;
      margin-bottom: 20rpx;
      padding: 24rpx;
      border: 1px solid #f37021;
      .image-wrapper {
        width: 140rpx;
        height: 140rpx;
        float: left;
        margin-right: 24rpx;
        
        .product-image {
          width: 100%;
          height: 100%;
          border-radius: 12rpx;
          background: #ff6634;
        }
      }

      .product-info {
        overflow: hidden;
        .name {
          font-size: 28rpx;
          color: #333;
          margin-bottom: 8rpx;
          display: block;
        }

        .desc {
          font-size: 24rpx;
          color: #999;
          margin-bottom: 24rpx;
          display: block;
        }

        .bottom-row {
          display: flex;
          align-items: center;
          justify-content: space-between;
          
          .price-wrapper {
            display: flex;
            align-items: baseline;
            
            .symbol {
              font-size: 24rpx;
              color: #ff6634;
            }
            
            .price {
              font-size: 36rpx;
              font-weight: bold;
              color: #ff6634;
            }
          }

          .points {
            font-size: 24rpx;
            color: #ff6634;
            margin-left: auto;
            margin-right: 24rpx;
          }

          .buy-btn {
            width: 140rpx;
            height: 56rpx;
            line-height: 56rpx;
            text-align: center;
            background: #ff6634;
            color: #fff;
            font-size: 24rpx;
            border-radius: 28rpx;
            padding: 0;
          }
        }
      }
    }
  }
}
</style> 